<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-18 14:23:47
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:19:16
 * @FilePath: \nien-vue3-admin\src\views\finance\FinancialManagementTools\accountMaintain\index.vue
 * @Description: 新增\编辑弹窗
-->
<template>
  <el-dialog
    v-model="visible" 
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :title="`${title}收款账号`"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px" 
    >
      <el-form-item label="公司名称" prop="organizationName">
        <el-input v-model="formData.organizationName" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="bankDeposit">
        <el-input v-model="formData.bankDeposit" placeholder="请输入开户行"></el-input>
      </el-form-item>
      <el-form-item label="公司账号" prop="accountNo">
        <el-input v-model="formData.accountNo" placeholder="请输入公司账号"></el-input>
      </el-form-item>
      <el-form-item label="SWIFT码" prop="swiftCode">
        <el-input v-model="formData.swiftCode" placeholder="请输入SWIFT码"></el-input>
      </el-form-item>
      <el-form-item label="路由" prop="routing">
        <el-select
          v-model="formData.routing"
          placeholder="请选择路由"
          clearable
        >
          <el-option
            v-for="dict in routDict"
            :key="dict.key"
            :label="dict.label"
            :value="dict.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入公司地址"></el-input>
      </el-form-item>
      <el-form-item label="账号性质" prop="property">
        <el-input v-model="formData.property" placeholder="请输入账号性质"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="formData.remarks" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio 
            v-for="dict in dicts[DictDirection.是否禁用字典]"
            :key="dict.customerCode"
            :label="dict.customerName"
            :value="dict.customerCode"
          ></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" :loading="confirmLoading" @click="confirm">确定</el-button>
        <el-button type="info" :loading="confirmLoading" @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive, getCurrentInstance, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { collectionInfoInsert as insert, 
  collectionInfoUpdate as update } from '@/api/finance/FinancialManagementTools'

const {
  appContext: {
    config: {
      globalProperties: { $validateForm },
    },
  },
} = getCurrentInstance()

const dicts = useDicts()
dicts.setDicts(DictDirection.是否禁用字典)

const routDict = [
  { label: '电汇', key: 'TT' },
  { label: '自动转账', key: 'ACH' },
]
const emits = defineEmits(['success'])
const formRef = ref(null)
const confirmLoading = ref<boolean>(false)
const visible = ref<boolean>(false)
const title = ref<string>('')
const formData = reactive({
  address: '',
  organizationName: '',
  accountNo: '',
  swiftCode: '',
  routing: '',
  remarks: '',
  property: '',
  bankDeposit: '',
  status: 0,
})
const rules = {
  organizationName: [{ required: true, message: '请输入公司名称', trigger: ['blur'] }],
  bankDeposit: [{ required: true, message: '请输入开户行', trigger: ['blur'] }],
  accountNo: [{ required: true, message: '请输入公司账号', trigger: ['blur'] }],
}

const open = (t:string, row?:{id:string, [key:string]: any}) => {
  visible.value = true
  title.value = t
  
  if (t === '修改') {
    const {
      id,
      address,
      organizationName,
      accountNo,
      swiftCode,
      routing,
      remarks,
      property,
      bankDeposit,
      status,
    } = row

    nextTick(() => {
      // el-form渲染完成再赋值，resetFields是初始到渲染时的值
      Object.assign(reactive, {
        id,
        address,
        organizationName,
        accountNo,
        swiftCode,
        routing,
        remarks,
        property,
        bankDeposit,
        status,
      })
    })
  }
}
const api = () => (title.value === '修改' ? update : insert)

const confirm = () => {
  $validateForm(formRef.value, () => {
    confirmLoading.value = true
    api()(reactive).then(res => {
      if (res.code === 200) {
        ElMessage.success(`${ title.value }成功！`)
        emits('success')
        cancel()
      }
    }).finally(() => {
      confirmLoading.value = false
    })
  })
}
const cancel = () => {
  visible.value = false
  formRef.value && formRef.value.resetFields()
}

defineExpose({
  open,
})
</script>